<template>
	<view class="register-container">
		<u-navbar bgColor="#1A1A1A" autoBack height="90" placeholder fixed>
			<view class="u-nav-slot" slot="right">
				<!-- 正文内容 -->
				<text style="font-size: 48rpx;">注册</text>
			</view>
		</u-navbar>
		<view class="register-form">
			<u-form :model="registerForm">
				<u-form-item prop="username">
					<u--input prefixIcon="phone" v-model="registerForm.username" placeholderClass="placeholderClass"
						placeholderStyle="color:#706868" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item prop="verificationCode">
					<u--input v-model="registerForm.verificationCode" prefixIcon="photo" placeholder="验证码"
						placeholderClass="placeholderClass" placeholderStyle="color:#706868">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
						</u-input>
					</u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input type="password" prefixIcon="lock-open" v-model="registerForm.password"
						placeholderClass="placeholderClass" placeholderStyle="color:#706868" placeholder="请输入密码">
					</u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input type="password" prefixIcon="lock-open" v-model="registerForm.aginPassword"
						placeholderClass="placeholderClass" placeholderStyle="color:#706868" placeholder="再次输入密码">
					</u--input>
				</u-form-item>
				<u-form-item>
					<u-button style="color: #000000;" text="注册" color="#F7E522" @click="register"></u-button>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		userRegister
	} from "@/api/login.js"
	import {
		TOAST
	} from "@/utils/utils.js"
	export default {
		data() {
			return {
				registerForm: {},
				tips: '',
				value: ''
			};
		},
		watch: {
			value(newValue, oldValue) {
				// console.log('v-model', newValue);
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			register() {
				userRegister({
					username: this.registerForm.username,
					password: this.registerForm.password,
					verificationCode: this.registerForm.verificationCode
				}).then(res => {
					if (res.code === 200) {
						TOAST("注册成功")
					}
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login"
						})
					})
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-button--success {
		background-color: #000000;
		border-color: #000000;
		color: #706868;
	}

	/deep/.u-input {
		background-color: #000000;
	}

	.register-container {
		height: 100%;
		background: url(../static/imgs/login-bg.png) no-repeat;
		background-size: 50% auto;
		background-position: 50% 30%;
		background-color: #1A1A1A;
		z-index: -999999;
		padding: 0 70rpx;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		.registerForm {
			width: 100%;
		}
	}
</style>
